<template>
  <div class="complaint-detail-page">
    <!-- 顶部标题 -->
    <van-nav-bar :title="title" left-arrow @click-left="goBack" />

    <!-- 主体内容 -->
    <div class="content-wrapper" v-if="detail">
      <!-- 信息卡片 -->
      <div class="info-card">
        <!-- 公司头像和名称 -->
        <div class="company-header">
          <img
            src="/public/toux-cat1.png"
            alt="公司头像"
            class="company-avatar"
          />
          <div class="company-name">{{ detail.companyName }}客户服务</div>
        </div>
        <div class="info-row">
          <span class="label">被诉对象</span>
          <span class="value">{{ detail.companyName }}</span>
        </div>
        <div class="info-row">
          <span class="label">投诉问题</span>
          <van-tag round plain>{{ detail.subject }}</van-tag>
        </div>
        <div class="info-row">
          <span class="label">投诉要求</span>
          <van-tag round plain>{{ detail.requirements }}</van-tag>
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="content-area">
        <div class="title-wrapper">
          <van-tag
            :type="getStatusType(detail.status)"
            plain
            size="small"
            class="status-tag"
          >
            {{ getStatusText(detail.status) }}
          </van-tag>
          <!-- 标题 -->
          <div class="title">{{ detail.title }}</div>
        </div>

        <!-- 用户信息 -->
        <div class="user-info">
          <img
            :src="avatar[detail.userId % 4]"
            alt="用户头像"
            class="user-avatar"
          />
          <div class="user-meta">
            <div class="username">{{ anon[detail.userId % 5] }}</div>
            <div class="time">
              {{ formatDate(detail.createTime) }} 于黑猫投诉平台发起
            </div>
          </div>
        </div>

        <!-- 描述 -->
        <div class="description">{{ detail.description }}</div>

        <!-- 图片附件 -->
        <div v-if="detail.hideImage === 0" class="attachment-list">
          <van-image
            v-for="(url, index) in attachmentUrls"
            :key="index"
            width="100%"
            height="120px"
            fit="cover"
            :src="url"
            @click="previewImage(index)"
            class="attachment-item"
          />
        </div>
        <!-- 隐藏图片 -->
        <div v-if="detail.hideImage === 1" class="attachment-list">
          <van-image
            width="100%"
            height="120px"
            fit="cover"
            src="/public/common-default.png"
            @click="previewImage(index)"
            class="attachment-item"
          />
        </div>
      </div>
      <!-- 声明区域 -->
      <div class="disclaimer">
        <div class="disclaimer-title">声明</div>
        <div class="disclaimer-content">
          <p>1. 以上内容仅代表投诉者本人，不代表黑猫投诉立场。</p>
          <p>2. 未经授权，本平台案例禁止任何转载，违者将被追究法律责任。</p>
          <p>
            3.
            黑猫投诉处理投诉不收取任何费用，凡以黑猫投诉名义收费的均为冒充、欺骗行为，请及时报警并与黑猫官方反馈。举报邮箱
            heimaotousu@vip.sina.com。
          </p>
          <p>
            <strong style="color: #e64a4a"
              >4.
              黑猫平台不会有所谓的“客服”主动联系协商退款，发起投诉后纠纷处理会由被投诉企业与消费者进行联系沟通。</strong
            >
          </p>
          <p>
            5.
            请大家选择官方渠道解决消费纠纷，不要轻信第三方机构或个人办理退费以免受骗，请不要随意通过QQ或微信等方式添加陌生人，更不要给陌生人汇款，谨防被骗，如遇诈骗请及时报警。
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted,computed  } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getFindComplaintsDetail } from "@/api";
import { showImagePreview } from "vant";

const route = useRoute();
const router = useRouter();
const complaintId = route.params.cId;

const detail = ref(null);
const loading = ref(true);

const title = "投诉编号:" + complaintId;

const goBack = () => {
  router.go(-1);
};

// 匿名列表
const anon = ref(["勇敢喵", "正义喵", "洞察喵", "机灵喵", "友爱喵"]);
// 头像列表
const avatar = ref([
  "/toux-cat1.png",
  "/toux-cat2.png",
  "/toux-cat3.png",
  "/toux-cat4.png",
]);

const statusMap = {
  pending: "待分配",
  processing: "处理中",
  resolved: "已完成",
  replied: "商家已回复",
};

// 获取中文状态
const getStatusText = (statusKey) => {
  return statusMap[statusKey] || "未知状态";
};

const getStatusType = (statusKey) => {
  switch (statusKey) {
    case "resolved":
      return "success"; // 绿色
    case "processing":
      return "warning"; // 黄色
    case "replied":
      return "primary"; // 蓝色
    case "pending":
      return "default"; // 灰色
    default:
      return "default";
  }
};
const fetchDetail = async () => {
  loading.value = true;
  try {
    const res = await getFindComplaintsDetail(complaintId);
    detail.value = res.detail;
  } catch (error) {
    console.error("获取详情失败:", error);
    detail.value = null;
  } finally {
    loading.value = false;
  }
};

const formatDate = (dateStr) => {
  if (!dateStr) return "";
  const d = typeof dateStr === "number" ? new Date(dateStr) : new Date(dateStr);
  if (isNaN(d.getTime())) return "未知时间";
  return d
    .toLocaleString("zh-CN", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit", // 显示秒数
      hour12: false,
    })
    .replace(/\//g, "-");
};

const handleImgError = (e) => {
  e.target.src = "/default-company.png";
};

// 解析多图
const attachmentUrls = computed(() => {
  if (!detail.value?.attachmentUrl) return [];
  return detail.value.attachmentUrl
    .split(",")
    .map((url) => url.trim())
    .filter(Boolean);
});

// 预览图片
const previewImage = (index) => {
  if (attachmentUrls.value.length) {
    showImagePreview({
      images: attachmentUrls.value,
      startPosition: index,
    });
  }
};

onMounted(() => {
  fetchDetail();
});
</script>

<style lang="scss" scoped>
.complaint-detail-page {
  height: 100vh;
  background-color: #f8f9fa;
}

.content-wrapper {
  padding: 10px;
  // background-color: white;
  border-radius: 12px;
  margin: 10px;
  // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.company-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.company-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.company-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.info-card {
  background-color: #fff;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 10px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.label {
  font-size: 14px;
  color: #999;
  min-width: 70px;
}

.value {
  font-size: 14px;
  color: #333;
}

.content-area {
  background-color: #fff;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

.title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 12px;
}

.user-meta {
  flex: 1;
}

.username {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.time {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

.description {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 20px;
}

.attachment {
  border-radius: 8px;
  overflow: hidden;
  margin-top: 10px;
}

.status-tag {
  font-size: 12px;
  padding-left: 8px;
  min-width: 40px;
  height: 20px;
  line-height: 20px;
  border-radius: 4px;
}
.title-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}
.disclaimer {
  margin-top: 20px;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}

.disclaimer-title {
  margin-bottom: 8px;
}

.disclaimer-content {
  p {
    margin: 6px 0;
  }
}

.attachment-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attachment-item {
  border-radius: 8px;
  overflow: hidden;
}
</style>
